<h2>dock.js</h2>
<p>Creates a draggable system of docking elements, grouped into columns.</p>
<hr/>

<h3>Objects</h3>
<ul>
	<li><a href="#dock">OAT.Dock(div, numColumns)</a></li>
</ul>

<h3>Methods</h3>
<ul>
	<li><a href="#addobject">OAT.Dock.addObject(colIndex, content, options)</a></li>
</ul>

<h3>Messages</h3>
<ul>
	<li>OAT.MSG.DOCK_DRAG - sent after dock window is dragged to another position</li>
	<li>OAT.MSG.DOCK_REMOVE - sent after dock window was closed (removed)</li>
</ul>

<h3>CSS classes</h3>
<ul>
	<li>.dock</li>
	<li>.dock_blank</li>
	<li>.dock_column_0</li>
	<li>...</li>
	<li>.dock_column_n</li>
	<li>.dock_window</li>
	<li>.dock_header</li>
	<li>.dock_content</li>
</ul>

<hr/>

<h3><a name="dock">OAT.Dock(div, numColumns)</a></h3>
<p>Creates a dock inside <em>div</em> with <em>numColumn</em> columns.</p>

<h3><a name="addobject">OAT.Dock.addObject(colIndex, content, options)</a></h3>
<p>Adds a new window to dock, resp. to its column with index <em>colIndex</em>. This window contains <em>content</em>.
 Object <em>options</em> may contain:</p>
 
 <ul>
	<li>color - of border & header</li>
	<li>titleColor - font color in header</li>
	<li>title</li>
 </ul>

<p class="code">
var content = OAT.Dom.create("div");<br/>
content.innerHTML = "lorem ipsum :)"<br/>
var d = new OAT.Dock("parentDiv", 3); <br/>
d.addObject(0, content, {title:"Sample window"});
</p>
